<template>
  <div>
    <div>这是学生管理的页面~</div>
    <p></p>
    <button v-on:click="getAllStudent">获取所有学生</button>
    <div v-for="user in users" v-bind:key = user.id>
      {{students}}
    </div>
    <p></p>
    <div>
      请输入要查询用户信息的id：
      <input v-model="queryId">
    </div>
    <button v-on:click="getStudentById">通过id获取指定用户</button>
    <div>{{studentById}}</div>
    <p></p>
    <div>
      请输入要添加的用户信息：
      <div>
        学生名
        <input v-model="studentname">
      </div>
      <div>
        学号
        <input v-model="student_id">
      </div>
      <div>
        班级
        <input v-model="classname">
      </div>
      <div>
        电话
        <input v-model="telephone">
      </div>
      <div>
        qq
        <input v-model="qq">
      </div>
    </div>
    <button v-on:click="addStudent">添加用户</button>
  <p></p>
  <div>
    请输入要修改的用户信息：
    <div>
      id
      <input v-model="id">
    </div>
    <div>
      学生名
      <input v-model="studentname">
    </div>
    <div>
      学号
      <input v-model="student_id">
    </div>
    <div>
      班级
      <input v-model="classname">
    </div>
    <div>
      电话
      <input v-model="telephone">
    </div>
    <div>
      qq
      <input v-model="qq">
    </div>
  </div>
  <button v-on:click="updateStudent">修改用户</button>
    <div>
      请输入删除用户的id：
      <input v-model = "deleteId">
      <div>
        <button v-on:click="deleteStudent">删除用户</button>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "UserPage",
  data(){
    return{
      students: null,
      queryId: null,
      userById: null,
      studentname: null,
      student_id: null,
      classname: null,
      telephone: null,
      qq: null,
      id: null,
      deleteId: null
    }
  },
  methods: {
    getAllStudent(){
      axios.get("http://localhost:8081/students")
          .then(resp => {
            console.log(resp);
            this.students = resp.data;
          })
    },
    getStudentById(){
      axios.get(`http://localhost:8081/student/${this.queryId}`)
          .then(resp => {
            console.log(resp);
            this.userById = resp.data;
          })
    },
    addStudent(){
      axios.post("http://localhost:8081/student",
          {
            studentname: this.studentname,
            student_id: this.student_id,
            classname: this.classname,
            telephone: this.telephone,
            qq: this.qq
          }).then(resp => {
        console.log(resp);
      })
    },
    updateStudent(){
      axios.put("http://localhost:8081/student",{
        id: this.id,
        studentname: this.studentname,
        student_id: this.student_id,
        classname: this.classname,
        telephone: this.telephone,
        qq: this.qq
      }).then( resp => {
        console.log(resp);
      })
    },
    deleteStudent(){
      axios.delete("http://localhost:8081/student", {
        params: {
          id: this.deleteId
        }
      }).then(resp => {
        console.log(resp);
      })
    }
  }
}
</script>
<style scoped>
</style>